<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        .compulte {
            color: greenyellow;
        }
        .del {
            color: #ccc;
            text-decoration: line-through;
        }
    </style>
    <body>
        <div id="box">
            <input type="checkbox" id="all" /> 备忘录：<input
                type="text"
                id="add"
            />
        </div>
        <ol></ol>
        <div>
            <button id="allList">所有</button>
            <button id="computed">已完成</button>
            <button id="incomplete">未完成</button>
            <button id="delList">已删除</button>
        </div>
    </body>
    <script>
        window.onload = function () {
            document.getElementById('add').addEventListener('keyup', addList)
            render()
            document.querySelector('ol').addEventListener('click', chkFun)
            all.addEventListener('change', allFun)
            allList.addEventListener('click', allListFun)
            computed.addEventListener('click', computedFun)
            incomplete.addEventListener('click', incompleteFun)
            delList.addEventListener('click', delListFun)
        }
        function delListFun() {
            let data = getLocalData()
            data = data.filter((item) => {
                return item.status == 3
            })
            render(data)
        }
        function incompleteFun() {
            let data = getLocalData()
            data = data.filter((item) => {
                return item.status == 1
            })
            render(data)
        }
        function allListFun() {
            render()
        }
        function computedFun() {
            let data = getLocalData()
            data = data.filter((item) => {
                return item.status == 2
            })
            render(data)
        }
        function allFun() {
            let status = this.checked ? 2 : 1
            let data = getLocalData()
            data = data.map((item, index) => {
                return {
                    con: item.con,
                    status: item.status == 3 ? 3 : status,
                }
            })
            localStorage.setItem('data', JSON.stringify(data))
            render()
        }
        function chkFun() {
            let index = event.target.parentNode.getAttribute('data-index')
            if (event.target.nodeName == 'INPUT') {
                let status = event.target.checked ? 2 : 1
                updateStatus(index, status)
                render()
            }
            if (event.target.nodeName == 'BUTTON') {
                if (event.target.innerHTML == '删除') {
                    updateStatus(index, 3)
                }
                if (event.target.innerHTML == '恢复') {
                    console.log(index)
                    updateStatus(index, 1)
                }
                render()
            }
        }
        function updateStatus(index, status) {
            let data = getLocalData()
            data[index].status = status
            localStorage.setItem('data', JSON.stringify(data))
        }
        function addList() {
            if (event.keyCode == 13) {
                let tmp = {
                    con: this.value,
                    status: 1, //1代表未完成，2代表已完成 3代表删除
                }
                setLocalData(tmp)
                this.value = ''
                render()
            }
        }
        function setLocalData(tmp) {
            let data = getLocalData()
            data.push(tmp)
            localStorage.setItem('data', JSON.stringify(data))
        }
        function render(params = false) {
            let data = params || getLocalData(),
                html = ''
            data.forEach((item, index) => {
                html += `<li data-index="${index}">
                            <input ${
                                item.status == '3' ? 'disabled' : ''
                            } type="checkbox" ${
                    item.status == '2' ? 'checked' : ''
                } />
                            <span class="${getClassName(item.status)}">${
                    item.con
                }</span>
                            <button>删除</button>
                            <button>恢复</button>
                        </li>`
            })
            document.querySelector('ol').innerHTML = html
        }
        function getClassName(status) {
            switch (status) {
                case 1:
                    return ''
                case 2:
                    return 'compulte'
                case 3:
                    return 'del'
            }
        }
        function getLocalData() {
            let data = localStorage.getItem('data')
            if (data) {
                return JSON.parse(data)
            } else {
                return []
            }
        }
    </script>
</html>
